vue中添加Tinymce富文本编辑器

您所在的位置：网站首页 › django 富文本 › vue中添加Tinymce富文本编辑器

vue中添加Tinymce富文本编辑器

2023-03-23 00:36| 来源: 网络整理| 查看: 265

1.在 package.json 中安装插件

"@tinymce/tinymce-vue": "^2.1.0", "tinymce": "^5.1.5"

添加后，重新install

2.封装组件也可以直接用，封装是为了后期的延展性做考虑

// 根据需求，自己手动记得预览功能预览

手动引入需要的插件

import tinymce from 'tinymce/tinymce' import 'tinymce/themes/silver/theme' import Editor from '@tinymce/tinymce-vue' import 'tinymce/plugins/image' import 'tinymce/plugins/link' import 'tinymce/plugins/code' import 'tinymce/plugins/table' import 'tinymce/plugins/lists' import 'tinymce/plugins/contextmenu' import 'tinymce/plugins/colorpicker' import 'tinymce/plugins/textcolor' import 'tinymce/plugins/preview' import 'tinymce/plugins/media'

在data里面对编辑器进行定义，因为上传方式有两种，写了两个上传方法当时写在 methods里面，但是调用的时候，调不到，有可能是我写的有问题，可以自己进行尝试

init: { fontsize_formats: '8px 10px 12px 14px 16px 18px', // 第二步 language_url: '../../static/tinymce/langs/zh_CN.js', language: 'zh_CN', skin_url: '../../static/tinymce/skins/ui/oxide', height: 500, content_css: ['../../static/tinymce/skins/content/default/content.css'], accept: '', // eslint-disable-next-line standard/object-curly-even-spacing branding: false, selector: '#textarea', paste_data_images: false, file_picker_types: 'media', media_live_embeds: true, plugins: ' link table lists image code colorpicker textcolor contextmenu ', // media toolbar: ' preview bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | undo redo | code uploadpic', audio_template_callback: function (data) { return '' + '\n\n' + '' }, setup: (editor) => { // eslint-disable-next-line eqeqeq editor.ui.registry.addButton('preview', { text: '预览', onAction: (_) => { this.preview() } }) }, file_picker_callback: (cb, value, meta) => { // 当点击meidia图标上传时,判断meta.filetype == 'media'有必要，因为file_picker_callback是media(媒体)、image(图片)、file(文件)的共同入口 // eslint-disable-next-line eqeqeq if (meta.filetype == 'media') { // 创建一个隐藏的type=file的文件选择input let input = document.createElement('input') input.setAttribute('type', 'file') input.onchange = function () { let file = this.files[0]// 只选取第一个文件。如果要选取全部，后面注意做修改 uploadPic(file, cb) /* let xhr, formData; xhr = new XMLHttpRequest(); xhr.open('POST', self.apiUrl); xhr.withCredentials = self.credentials; xhr.upload.onprogress = function (e) { // 进度(e.loaded / e.total * 100) }; xhr.onerror = function () { //根据自己的需要添加代码 console.log(xhr.status); return; }; xhr.onload = function () { let json; if (xhr.status < 200 || xhr.status >= 300) { console.log('HTTP 错误: ' + xhr.status); return; } json = JSON.parse(xhr.responseText); //假设接口返回JSON数据为{status: 0, msg: "上传成功", data: {location: "/localImgs/1546434503854.mp4"}} if(json.status==0){ //接口返回的文件保存地址 let mediaLocation=json.data.location; //cb()回调函数，将mediaLocation显示在弹框输入框中 cb(mediaLocation, { title: file.name }); }else{ console.log(json.msg); return; } }; */ } // 触发点击 input.click() } async function uploadPic(blobInfo, cb) { let formData = new FormData() // 服务端接收文件的参数名，文件数据，文件名 // formData.append('file', blobInfo) // let res = await upload.upload(formData) // let data = res.data // eslint-disable-next-line eqeqeq // if (data && data.code == 0) { // cb(data.data, {title: blobInfo.name}) // return data.data // } else { // } } }, images_upload_handler: (blobInfo, success, failure) => { if (blobInfo.blob().size > 1024 * 1024) { failure('文件体积过大,不大于1M') } else { uploadPic(this.type) } async function uploadPic(type) { let formData = new FormData() // 服务端接收文件的参数名，文件数据，文件名 // formData.append('file', blobInfo.blob()) // let res // if (type === 'preview') { // res = await pagemanager.uoloadImage(formData) // } else { // res = await upload.upload(formData) // } // let data = res.data // // eslint-disable-next-line eqeqeq // if (data && data.code == 0) { // success(data.data) // } else { // failure('上传失败') // } } } }

在对富文本进行初始化

components: {Editor}, created() { tinymce.init(this.init) },

* 我开始安装的的版本过高，引入插件后，无法加载出来编辑器，后来把版本降低到现在使用的这个，就可以加载出

文档和度娘也有提到，版本跟插件的关系，版本不能超过5

【本文地址】

vue中添加Tinymce富文本编辑器

vue中添加Tinymce富文本编辑器

今日新闻

推荐新闻